<template>
  <div id="container"></div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { onMounted } from "vue";
import { shallowRef } from "@vue/reactivity";
import { drawPolygon } from "./polygon.js";
export default {
  props: {
    mapData: {
      type: Array,
      default: [],
    },
  },
  setup(props) {
    let map = shallowRef(null);
    let mapData = props.mapData;
    const initMap = () => {
      AMapLoader.load({
        key: "63e20fde69cb5b369c9aaa7081af9a8b",
        version: "2.0",
        plugins: [""],
      })
        .then((AMap) => {
          map = new AMap.Map("container", {
            zoom: 18,
            center: [119.629245, 32.160641],
          });

          // 地图加载完成！
          map.on("complete", function () {
            // 绘制多边形
            drawPolygon(mapData, map);

            // 绘制划定区域背景
            const polygon = new AMap.Polygon({
              path: [
                [119.628042, 32.161593],
                [119.629346, 32.161673],
                [119.629355, 32.161778],
                [119.629719, 32.161794],
                [119.63016, 32.159711],
                [119.628212, 32.159587],
              ],
              fillColor: "translate",
            });
            map.add(polygon);

            // map.on('click', function(ev) {
            //   // 触发事件的地理坐标，AMap.LngLat 类型
            //   var lnglat = ev.lnglat;
            //   console.log(lnglat);
            // });
          });
        })
        .catch((e) => {
          console.log(e);
        });
    };
    onMounted(() => {
      initMap();
    });
    return {
      map,
    };
  },
};
</script>
<style lang="scss" scoped>
#container {
  height: 100%;
}
</style>